<template>
	<view class="container">
		<view class="container-item">
			<view class="question">两个有理数的和除以这两个有理数的积，其商为0，则这两个有理数为()</view>
			<view class="options">
				<view class="options-item">
					<view class="option">A、两个相等的实数根</view>
					<view class="option">B、两个不相等的实数根</view>
					<view class="option">C、三个不相等的实数根</view>
					<view class="option">D、没有实数根</view>
				</view>
				<view class="answer">
					<view class="answer-item">正确答案：
						<text class="answer-item1">B</text>
					</view>
					<!-- 查看解析按钮 -->
					<view @click="toggleSolution" class="solution-button">查看解析
						<image class="solution-image"
							:src="showSolutionContent ? '../../static/image/向上箭头.png' : '../../static/image/向下箭头.png'"
							mode="aspectFit"></image>
					</view>
					<!-- 解析内容 -->
					<view v-if="showSolutionContent" class="solution-content">
						{{ solution }}
					</view>
				</view>
			</view>
		</view>
		</view>
</template>
<script>
	export default {
		data() {
			return {
				selectedOption: '',
				showSolutionContent: false,
				solution: '解析：设这两个有理数分别为 a 和 b，则根据题意有：\n\n\frac{a + b}{ab} = 0\n\n解得：\n\na + b = 0\n\n因此，b = -a。这意味着两个有理数互为相反数。\n\n正确答案是 B。'
			};
		},
		methods: {
			selectOption(option) {
				this.selectedOption = option;
				if (option === 'B') {
					uni.showToast({
						title: '回答正确！',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '回答错误！',
						icon: 'none'
					});
				}
			},
			 // 切换解析内容的显示与隐藏
			    toggleSolution() {
			      this.showSolutionContent = !this.showSolutionContent;
			    },
		}
	};
</script>

<style>
	.container {
		padding: 15px;
	}

	.container-item {
		background-color: white;
		border: none;
		border-radius: 10px;
	}

	.question {
		font-size: 18px;
		padding: 15px;
	}

	.options-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
		gap: 5px;
	}

	.option {
		width: 43%;
		text-align: left;
		margin-bottom: 10px;
		font-size: 15px;
		cursor: pointer;
	}

	.answer-item {
		margin-left: 10px;
	}
	.answer-item1 {
		color: red;
	}
	.solution-button {
		width: 100%;
		padding: 10px;
		text-align: center;
		color: #007aff;
	}

	.solution-image {
		width: 14px;
		height: 14px;
		position: relative;
		top: 5px;
		left: 5px;
	}

	.solution-content {
		padding: 10px;
	}
</style>